<template>
  <div class="singer-detail">
    <musicList
      :songs="songs"
      :title="title"
      :pic="pic"
      :loading="loading"
    ></musicList>
  </div>
</template>

<script>
import storage from 'good-storage'
import { SINGER_KEY } from '@/assets/js/constant.js'
import musicList from '@/components/music-list/music-list'
import { get } from '../service/newrequest'
import { getSingerDetail } from '../service/singer'
export default {
  name: 'singer-detail',
  components: { musicList },
  data() {
    return {
      songs: [],
      loading: true
    }
  },
  props: {
    singer: Object
  },
  computed: {
    computedSinger() {
      let ret = null
      const singer = this.singer
      if (singer) {
        ret = singer
      } else {
        const cacheSinger = storage.session.get(SINGER_KEY)
        if (cacheSinger && cacheSinger.mid === this.$route.params.id) {
          ret = cacheSinger
        }
      }
      return ret
    },
    pic() {
      const singer = this.computedSinger
      return singer && singer.pic
    },
    title() {
      const singer = this.computedSinger
      return singer && singer.name
    }
  },
  async created() {
    if (!this.computedSinger) {
      const path = this.$route.matched[0].path
      this.$router.push({ path })
      return
    }
    const result = await getSingerDetail(this.computedSinger)
    const data = {
      mid: result.map((song) => {
        return song.mid
      })
    }
    const res = await get('getSongsUrl', data)
    let map = res.data.map
    const songs = this.handelData(result, map)
    this.songs = songs
    this.loading = false
  },

  methods: {
    handelData(songs, map) {
      return songs
        .map((song) => {
          song.url = map[song.mid]
          return song
        })
        .filter((song) => {
          return song.url && song.url.indexOf('vkey') > -1
        })
    }
  }
}
</script>

<style lang="scss" scope>
.singer-detail {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: $color-background;
}
</style>
